<template>
  <div class="app-container">
    <div style="height: 100%">
      <el-card class="padding-20 flex-auto" style="margin: 20px 0;box-sizing: border-box;min-height: calc(100%  - 40px)">
        <div v-if="['1','2'].includes(activeName)" class="flex justify-content-space-between">
          <div>
            <div class="title">全面预算管理</div>
            <div class="sub_title">根据《医院财务制度》,医院预算是指医院按照国家有关规定,根据事业发展计划和目标编制的年度财务收支计划。</div>
          </div>
          <img src="@/assets/static/全面预算管理-图.png" alt="" class="icon" style="width: 120px;" />
        </div>
        <div v-if="['3','4'].includes(activeName)" class="flex justify-content-space-between">
          <div>
            <div class="title">规范设立总会计师</div>
            <div class="sub_title">根据相关法律法规要求,2018年底前,全国所有三几公里远全面落实总会计师制度。</div>
          </div>
          <img src="@/assets/static/设立总会计师-图.png" alt="" class="icon" style="width: 120px;" />
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="组织管理" name="1">
           <div style="position: relative;padding-bottom: 10px;">
             <div class="flex align-center justify-content-space-between">
               <div class="module_title">有预算管理委员会,单位主要负责人重视预算管理工作，业务部门与财务部门建立协调有效工作机制。</div>
               <el-button type="primary"  icon="upload" @click="openUploadDialog">上传文件</el-button>
             </div>
             <div class="file_table padding-14" style="background-color: #f6f6f6;border-radius: 6px;margin-top: 20px;">
               <div v-for="(item,index) in list1" :key="index" class="file_item flex justify-content-space-between align-center" style="margin-bottom: 20px">
                 <div class="flex align-center">
                   <img :src="getIconByFile(item.fileName)" alt="" style="width: 20px">
                   <div style="margin-left: 10px;font-size: 14px">{{item.fileName}}</div>
                 </div>
                 <div class="flex align-center" style="padding-right: 20px">
                   <img src="@/assets/static/查看文件.png"  style="width: 20px;cursor: pointer">
                   <img src="@/assets/static/编辑文件.png"  style="width: 16px;margin: 0 20px;cursor: pointer">
                   <img src="@/assets/static/删除文件.png" @click="open(item)"  style="width: 12px;cursor: pointer">
                 </div>
               </div>
             </div>
             <pagination v-show="total > 0" :total="Number(total)" v-model:page="queryParams.skipCount" v-model:limit="queryParams.maxResultCount" @pagination="getList" />
           </div>
          </el-tab-pane>
          <el-tab-pane label="制度建设" name="2">
            <div style="position: relative;padding-bottom: 10px;">
              <div class="flex align-center justify-content-space-between">
                <div class="module_title">制定预算管理、预算执行等相关制度或办法。</div>
                <el-button type="primary"  icon="upload" @click="openUploadDialog">上传文件</el-button>
              </div>
              <div class="file_table padding-14" style="background-color: #f6f6f6;border-radius: 6px;margin-top: 20px;">
                <div v-for="(item,index) in list2" :key="index" class="file_item flex justify-content-space-between align-center" style="margin-bottom: 20px">
                  <div class="flex align-center">
                    <img :src="getIconByFile(item.fileName)" alt="" style="width: 20px">
                    <div style="margin-left: 10px;font-size: 14px">{{item.fileName}}</div>
                  </div>
                  <div class="flex align-center" style="padding-right: 20px">
                    <img src="@/assets/static/查看文件.png"  style="width: 20px;cursor: pointer">
                    <img src="@/assets/static/编辑文件.png"  style="width: 16px;margin: 0 20px;cursor: pointer">
                    <img src="@/assets/static/删除文件.png" @click="open(item)"  style="width: 12px;cursor: pointer">
                  </div>
                </div>
              </div>
              <pagination v-show="total > 0" :total="Number(total)" v-model:page="queryParams.skipCount" v-model:limit="queryParams.maxResultCount" @pagination="getList" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="总会计师任命文件" name="3">
            <div style="position: relative;padding-bottom: 10px;">
              <div class="flex align-center justify-content-space-between">
                <div class="module_title">请上传总会计师任命相关文件材料。</div>
                <el-button type="primary"  icon="upload" @click="openUploadDialog">上传文件</el-button>
              </div>
              <div class="file_table padding-14" style="background-color: #f6f6f6;border-radius: 6px;margin-top: 20px;">
                <div v-for="(item,index) in list3" :key="index" class="file_item flex justify-content-space-between align-center" style="margin-bottom: 20px">
                  <div class="flex align-center">
                    <img :src="getIconByFile(item.fileName)" alt="" style="width: 20px">
                    <div style="margin-left: 10px;font-size: 14px">{{item.fileName}}</div>
                  </div>
                  <div class="flex align-center" style="padding-right: 20px">
                    <img src="@/assets/static/查看文件.png"  style="width: 20px;cursor: pointer">
                    <img src="@/assets/static/编辑文件.png"  style="width: 16px;margin: 0 20px;cursor: pointer">
                    <img src="@/assets/static/删除文件.png" @click="open(item)"  style="width: 12px;cursor: pointer">
                  </div>
                </div>
              </div>
              <pagination v-show="total > 0" :total="Number(total)" v-model:page="queryParams.skipCount" v-model:limit="queryParams.maxResultCount" @pagination="getList" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="医院领导班子职责分工" name="4">
            <div style="position: relative;padding-bottom: 10px;">
              <div class="flex align-center justify-content-space-between">
                <div class="module_title">请上传最新的医院领导班子职责分工文件。</div>
                <el-button type="primary"  icon="upload" @click="openUploadDialog">上传文件</el-button>
              </div>
              <div class="file_table padding-14" style="background-color: #f6f6f6;border-radius: 6px;margin-top: 20px;">
                <div v-for="(item,index) in list4" :key="index" class="file_item flex justify-content-space-between align-center" style="margin-bottom: 20px">
                  <div class="flex align-center">
                    <img :src="getIconByFile(item.fileName)" alt="" style="width: 20px">
                    <div style="margin-left: 10px;font-size: 14px">{{item.fileName}}</div>
                  </div>
                  <div class="flex align-center" style="padding-right: 20px">
                    <img src="@/assets/static/查看文件.png"  style="width: 20px;cursor: pointer">
                    <img src="@/assets/static/编辑文件.png"  style="width: 16px;margin: 0 20px;cursor: pointer">
                    <img src="@/assets/static/删除文件.png" @click="open(item)"  style="width: 12px;cursor: pointer">
                  </div>
                </div>
              </div>
              <pagination v-show="total > 0" :total="Number(total)" v-model:page="queryParams.skipCount" v-model:limit="queryParams.maxResultCount" @pagination="getList" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 文件上传 -->
    <el-dialog v-model="dialogTableVisible" title="文件上传" width="800">
      <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖动文件或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">文件大小限制 10MB</div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
const iconList = {
  pdf: new URL('@/assets/icons/file/PDF.png', import.meta.url).href,
  xls: new URL('@/assets/icons/file/XLS.png', import.meta.url).href,
  ppt: new URL('@/assets/icons/file/PPT.png', import.meta.url).href,
  pptx: new URL('@/assets/icons/file/PPTX.png', import.meta.url).href,
  docx: new URL('@/assets/icons/file/DOCX.png', import.meta.url).href,
  xlsx: new URL('@/assets/icons/file/XLSX.png', import.meta.url).href,
};
const dialogTableVisible = ref(false)
const activeName = ref('1')
const total = ref(100);
const queryParams = ref({
  skipCount: 0,
  maxResultCount: 10
})
const list1 = reactive([
  {  fileName: "预算管理委员会成立文件.pdf" },
  {  fileName: "2024年预算管理实施细则.docx" },
  {  fileName: "部门预算分配表.xlsx" },
  { fileName: "预算执行监督办法.xls" },
  {  fileName: "财务管理制度汇编.ppt" },
  {  fileName: "预算管理委员会成立文件.pdf" },
  {  fileName: "2024年预算管理实施细则.docx" },
  {  fileName: "部门预算分配表.xlsx" },
]);
const list2 = reactive([
  {  fileName: "预算管理委员会成立文件.pdf" },
  {  fileName: "2024年预算管理实施细则.docx" },
  {  fileName: "部门预算分配表.xlsx" },

]);
const list3 = reactive([
  {  fileName: "部门预算分配表.xlsx" },
  { fileName: "预算执行监督办法.xls" },
  {  fileName: "财务管理制度汇编.ppt" },
]);
const list4 = reactive([
  {  fileName: "部门预算分配表.xlsx" },
  { fileName: "预算执行监督办法.xls" },
  {  fileName: "部门预算分配表.xlsx" },
  { fileName: "预算执行监督办法.xls" },
  {  fileName: "财务管理制度汇编.ppt" },
  {  fileName: "预算管理委员会成立文件.pdf" },
  {  fileName: "2024年预算管理实施细则.docx" },
  {  fileName: "部门预算分配表.xlsx" },
  { fileName: "预算执行监督办法.xls" },
]);
const getIconByFile = (fileName) => {
  const extension = fileName.split('.').pop().toLowerCase();
  return iconList[extension] || '';
};
const getList = ( ) => {
}
const handleClick = (tab ) => {
  console.log(tab, event)
}
const openUploadDialog = ()=>{
  dialogTableVisible.value = true
}

const open = () => {
  ElMessageBox.confirm('是否要删除此文件?', '警告', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'}).then(() => {
          ElMessage({type: 'success', message: '删除成功',})
      }).catch(() => {
           ElMessage({type: 'info', message: '取消删除',
        })
      })
}
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 18px;
    color: #000000;
    font-weight: 600;
  }
  .sub_title{
    color: #5a5959;
    margin-top: 10px;
  }

}
</style>
